<!DOCTYPE html>
<!-- saved from url=(0045)features.html -->
<html lang="en"
	class=" js no-touch no-android chrome no-firefox no-iemobile no-ie no-ie10 no-ie11 no-ios no-ios7 ipad">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Notebook | Web Application</title>
<meta name="description"
	content="app, web app, responsive, admin dashboard, admin, flat, flat ui, ui kit, off screen nav">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="./features_files/font.css" type="text/css">
<link rel="stylesheet" href="./features_files/landing.css"
	type="text/css">
<link rel="stylesheet" href="./features_files/app.v1.css"
	type="text/css">
<!--[if lt IE 9]> <script src="js/ie/html5shiv.js"></script> <script src="js/ie/respond.min.js"></script> <script src="js/ie/excanvas.js"></script> <![endif]-->
</head>
<body class="" style="">
	<!-- header -->
	<header id="header"
		class="navbar navbar-fixed-top bg-white box-shadow b-b b-light affix-top"
		data-spy="affix" data-offset-top="1">
		<div class="container">
			<div class="navbar-header">
				<a href="features.html#" class="navbar-brand"><img
					src="./features_files/logo.png" class="m-r-sm"><span
					class="text-muted">Notebook</span></a>
				<button class="btn btn-link visible-xs" type="button"
					data-toggle="collapse" data-target=".navbar-collapse">
					<i class="fa fa-bars"></i>
				</button>
			</div>
			<div class="collapse navbar-collapse">
				<ul class="nav navbar-nav navbar-right">
					<li class="active"><a href="landing.html">Home</a></li>
					<li><a href="features.html">Features</a></li>
					<li><a href="price.html">Plans &amp; Pricing</a></li>
					<li><a href="blog.html">Blog</a></li>
					<li>
						<div class="m-t-sm">
							<a href="login.jsp" class="btn btn-link btn-sm">Sign in</a> <a
								href="signup.html" class="btn btn-sm btn-success m-l"><strong>Sign
									up</strong></a>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</header>
	<!-- / header -->
	<section id="content">
		<div class="bg-dark lt">
			<div class="container">
				<div class="m-b-lg m-t-lg">
					<h3 class="m-b-none">Features</h3>
					<small class="text-muted">Killer features you need know</small>
				</div>
			</div>
		</div>
		<div class="bg-white b-b b-light">
			<div class="container">
				<ul class="breadcrumb no-border bg-empty m-b-none m-l-n-sm">
					<li><a href="landing.html">Home</a></li>
					<li class="active">Features</li>
				</ul>
			</div>
		</div>
		<div>
			<div class="container m-t-xl">
				<div class="row">
					<div class="col-sm-7">
						<h2 class="font-thin m-b-lg">
							Fully Responsive on <span class="text-primary">Mobile</span>, <span
								class="text-primary">Tablet</span> and <span
								class="text-primary">Desktop</span>
						</h2>
						<p class="h4 m-b-lg l-h-1x">Your application will works no
							matter where you are, You can use your application at anywhere in
							the world. This template works on mobile device too.</p>
						<div class="row m-b-xl">
							<div class="col-sm-6">
								<i class="fa fa-fw fa-angle-right"></i>Have Any Number of
								Columns
							</div>
							<div class="col-sm-6">
								<i class="fa fa-fw fa-angle-right"></i>Scales to Any Width
							</div>
							<div class="col-sm-6">
								<i class="fa fa-fw fa-angle-right"></i>It's Smart and Easy
							</div>
							<div class="col-sm-6">
								<i class="fa fa-fw fa-angle-right"></i>It Fits In with You
							</div>
							<div class="col-sm-6">
								<i class="fa fa-fw fa-angle-right"></i>Take What You Need
							</div>
							<div class="col-sm-6">
								<i class="fa fa-fw fa-angle-right"></i>Flexible way to create a
								responsive layout
							</div>
						</div>
						<p class="clearfix">&nbsp;</p>
						<div class="row m-b-xl">
							<div class="col-xs-2">
								<i class="fa fa-desktop fa-4x icon-muted"></i>
							</div>
							<div class="col-xs-2">
								<i class="fa fa-plus icon-muted m-t"></i>
							</div>
							<div class="col-xs-2">
								<i class="fa fa-tablet fa-4x icon-muted"></i>
							</div>
							<div class="col-xs-2">
								<i class="fa fa-plus icon-muted m-t"></i>
							</div>
							<div class="col-xs-2">
								<i class="fa fa-mobile fa-4x icon-muted"></i>
							</div>
						</div>
					</div>
					<div class="col-sm-5 text-center">
						<section
							class="panel bg-dark inline aside-md no-border device phone animated fadeInRightBig">
							<header class="panel-heading text-center">
								<i class="fa fa-minus fa-2x icon-muted m-b-n-xs block"></i>
							</header>
							<div class="m-l-xs m-r-xs">
								<div class="carousel auto slide" id="c-fade"
									data-interval="3000">
									<div class="carousel-inner">
										<div class="item text-center active">
											<img src="./features_files/phone-2.png" class="img-full">
										</div>
										<div class="item text-center">
											<img src="./features_files/phone-1.png" class="img-full">
										</div>
									</div>
								</div>
							</div>
							<footer class="bg-dark text-center panel-footer no-border">
								<i class="fa fa-circle icon-muted fa-lg"></i>
							</footer>
						</section>
					</div>
				</div>
			</div>
		</div>
		<div class="bg-white b-t b-light">
			<div class="container">
				<div class="row m-t-xl m-b-xl">
					<div class="col-sm-5 text-center clearfix m-t-xl appear"
						data-ride="animated" data-animation="fadeInLeftBig">
						<div class="h1 font-bold m-t-xl m-b-xl">
							<span class="fa-2x icon-muted">{less}</span>
						</div>
					</div>
					<div class="col-sm-7">
						<h2 class="font-thin m-b-lg">Using LESS</h2>
						<p class="h4 m-b-lg l-h-1x">This file provide Less css files,
							You can compiled the less to css files with lessphp, it provides
							the following mechanisms: variables, nesting, mixins, operators
							and functions.</p>
						<p class="m-b-xl">We make the less files as Bootstrap way. you
							can config the variables in one place, like colors:
							@brand-primary, @brand-success, @border-color. and you can get
							the unlimited colors for your application.</p>
						<p class="m-t-xl m-b-xl h4">
							<i class="fa fa-quote-left fa-fw fa-1x icon-muted"></i> Less is
							More
						</p>
					</div>
				</div>
			</div>
		</div>
		<div class="b-t b-light">
			<div class="container m-t-xl">
				<div class="row">
					<div class="col-sm-7">
						<h2 class="font-thin m-b-lg">Application Layout</h2>
						<p class="h4 m-b-lg l-h-1x">We provide .hbox and .vbox to
							create the application layout. it let you create complicated
							layout as you want.</p>
						<p class="m-b-xl">
							<a href="index.jsp" class="btn btn-sm btn-primary font-bold">Try
								it now</a>
						</p>
					</div>
					<div class="col-sm-5 text-center appear" data-ride="animated"
						data-animation="fadeInUp">
						<section
							class="panel bg-dark m-t-lg m-r-n-lg m-b-n-lg no-border device animated fadeInUp">
							<header class="panel-heading text-left">
								<i class="fa fa-circle fa-fw icon-muted"></i> <i
									class="fa fa-circle fa-fw icon-muted"></i> <i
									class="fa fa-circle fa-fw icon-muted"></i>
							</header>
							<img src="./features_files/main.png" class="img-full">
						</section>
					</div>
				</div>
			</div>
		</div>
		<div class="bg-white b-t b-light pos-rlt">
			<div class="container">
				<div class="row m-t-xl m-b-xl">
					<div class="col-sm-5 text-center clearfix m-t-xl appear"
						data-ride="animated" data-animation="fadeInLeftBig">
						<div class="h3 font-bold m-t-xl m-b-xl">
							<i class="fa fa-circle text-primary fa-2x"></i> <i
								class="fa fa-circle text-info fa-2x"></i> <i
								class="fa fa-circle text-success fa-2x"></i> <i
								class="fa fa-circle text-warning fa-2x"></i> <i
								class="fa fa-circle text-danger fa-2x"></i> <i
								class="fa fa-circle text-dark fa-2x"></i> <i
								class="fa fa-circle text-light fa-2x"></i>
						</div>
					</div>
					<div class="col-sm-7">
						<h2 class="font-thin m-b-lg">Rich Components &amp; Widgets</h2>
						<p class="h4 m-b-lg l-h-1x">We create many components and
							widgets for your real application, we provide 8 default color
							palettes for you to create the colorful components.</p>
						<ul class="m-b-xl fa-ul">
							<li><i class="fa fa-li fa-check text-muted"></i>369
								Fontawesome icons</li>
							<li><i class="fa fa-li fa-check text-muted"></i>+30 Jquery
								Components</li>
							<li><i class="fa fa-li fa-check text-muted"></i>Application
								pages</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<div class="b-t b-light">
			<div class="container m-t-xl">
				<div class="row">
					<div class="col-sm-7">
						<h2 class="font-thin m-b-lg">Backbone Notes with Mysql &amp;
							RESTful API</h2>
						<p class="h4 m-b-lg l-h-1x">We built a Backbone Note
							application for your inspiration, It supports local storage and
							mysql data save. We also created a RESTful api to Get, Post, Put
							and Delete the data.</p>
						<p class="m-b-xl">
							<a href="notebook.html" class="btn btn-dark font-bold">Try it
								now</a>
						</p>
					</div>
					<div class="col-sm-5 text-center appear" data-ride="animated"
						data-animation="fadeInRightBig">
						<section
							class="panel bg-light m-t-lg m-r-n-lg m-b-n-lg no-border device animated fadeInUp">
							<header class="panel-heading text-left">
								<i class="fa fa-circle fa-fw icon-muted"></i> <i
									class="fa fa-circle fa-fw icon-muted"></i> <i
									class="fa fa-circle fa-fw icon-muted"></i>
							</header>
							<img src="./features_files/app.png" class="img-full">
						</section>
					</div>
				</div>
			</div>
		</div>
		<div class="b-t b-light pos-rlt bg-white">
			<div class="container">
				<p class="m-t-xl m-b-xl">Much more features will be added in.</p>
			</div>
		</div>
	</section>
	<!-- footer -->
	<footer id="footer">
		<div class="bg-primary text-center">
			<div class="container wrapper">
				<div class="m-t-xl m-b">
					For your faster and easier web development. <a
						href="http://themeforest.net/user/Flatfull/portfolio?ref=flatfull"
						target="_blank" class="btn btn-lg btn-dark b-white bg-empty m-sm">Download
						it</a> <a href="index.jsp" target="_blank"
                                  class="btn btn-lg btn-warning b-white bg-empty m-sm">Live
						Preview</a>
				</div>
			</div>
			<i class="fa fa-caret-down fa-4x text-primary m-b-n-lg block"></i>
		</div>
		<div class="bg-dark dker wrapper">
			<div class="container text-center m-t-lg">
				<div class="row m-t-xl m-b-xl">
					<div class="col-sm-4 appear" data-ride="animated"
						data-animation="fadeInLeft" data-delay="300">
						<i class="fa fa-map-marker fa-3x icon-muted"></i>
						<h5 class="text-uc m-b m-t-lg">Find Us</h5>
						<p class="text-sm">
							23 soe Midlokls <br> 120002 Loki — UNITED KINGDOM
						</p>
					</div>
					<div class="col-sm-4 appear" data-ride="animated"
						data-animation="fadeInUp" data-delay="600">
						<i class="fa fa-envelope-o fa-3x icon-muted"></i>
						<h5 class="text-uc m-b m-t-lg">Mail Us</h5>
						<p class="text-sm">
							<a href="mailto:hey@example.com">info@example.com</a>
						</p>
					</div>
					<div class="col-sm-4 appear" data-ride="animated"
						data-animation="fadeInRight" data-delay="900">
						<i class="fa fa-globe fa-3x icon-muted"></i>
						<h5 class="text-uc m-b m-t-lg">Join Us</h5>
						<p class="text-sm">
							Send your resume to <br>
							<a href="mailto:hey@example.com">recruit@example.com</a>
						</p>
					</div>
				</div>
				<div class="m-t-xl m-b-xl">
					<p>
						<a href="features.html#"
							class="btn btn-icon btn-rounded btn-facebook bg-empty m-sm"><i
							class="fa fa-facebook"></i></a> <a href="features.html#"
							class="btn btn-icon btn-rounded btn-twitter bg-empty m-sm"><i
							class="fa fa-twitter"></i></a> <a href="features.html#"
							class="btn btn-icon btn-rounded btn-gplus bg-empty m-sm"><i
							class="fa fa-google-plus"></i></a>
					</p>
					<p>
						<a href="features.html#content" data-jump="true"
							class="btn btn-icon btn-rounded btn-dark b-dark bg-empty m-sm text-muted"><i
							class="fa fa-angle-up"></i></a>
					</p>
				</div>
			</div>
		</div>
	</footer>
	<!-- / footer -->
	<!-- Bootstrap -->
	<!-- App -->
	<script src="./features_files/app.v1.js"></script>
	<script src="./features_files/jquery.appear.js"></script>
	<script src="./features_files/smoothscroll.js"></script>
	<script src="./features_files/landing.js"></script>
	<script src="./features_files/app.plugin.js"></script>
</body>
</html>